<template>
  <div class="homes">
    <div class="shou1">
      <div id="mychart"></div>
    </div>
    <div class="shou2">
      <div class="xioahe"><h2>最新动态</h2></div>
      <ul class="lists">
        <li>
          <dl>
            <dt>
                <img src="/docHomes/添加icon.png" alt="">
                <span>努力吧,少年!</span>
            </dt>
            <dd>2020-12-18</dd>
          </dl>
        </li>
      </ul>

      <ul class="lists">
        <li>
          <dl>
            <dt>
                <img src="/docHomes/添加icon.png" alt="">
                <span>努力吧,少年!</span>
            </dt>
            <dd>2020-12-18</dd>
          </dl>
        </li>
      </ul>
    </div>
    <div class="shou3">
       <div class="xioahe1"><h2>今日值班</h2></div>
      <ul class="listss">
        <li>
          <dl>
            <dt>
                <b>09:00-12:00</b>
                <span>努力吧,少年!</span>
            </dt>
            <dd><span>123456789</span></dd>
          </dl>
        </li>
      </ul>
      <ul class="listss">
        <li>
          <dl>
            <dt>
                <b>09:00-12:00</b>
                <span>努力吧,少年!</span>
            </dt>
            <dd><span>123456789</span></dd>
          </dl>
        </li>
      </ul>
    </div>
    <div class="shou4">
      <h2 class="zuoshang">备忘录</h2>
      <img src="/docHomes/添加icon.png" alt="" class="tupian1">
    </div>
    <div class="shou5">
      <div class="xioahe2"><h2>今日预约</h2></div>
      <ul class="listsss">
        <li>
          <dl>
            <dt>
                <b>09:00-12:00</b>
                <span>星空</span>
            </dt>
            <dd>
              <span>123456789</span>
              <b>查看</b>
            </dd>
          </dl>
        </li>
      </ul>


      <ul class="listsss">
        <li>
          <dl>
            <dt>
                <b>09:00-12:00</b>
                <span>星空</span>
            </dt>
            <dd>
              <span>123456789</span>
              <b>查看</b>
            </dd>
          </dl>
        </li>
      </ul>
      
      <ul class="listsss">
        <li>
          <dl>
            <dt>
                <b>09:00-12:00</b>
                <span>星空</span>
            </dt>
            <dd>
              <span>123456789</span>
              <b>查看</b>
            </dd>
          </dl>
        </li>
      </ul>

    </div>
  </div>
</template>

<script>
import {getDSelf} from '../../../../api/record'
import {getPUser} from '@/api/record'
export default {
    name:'dochomes',
    created(){
        getDSelf().then(result=>{
          console.log(result);
        })
    },
    data() {
      return {
        list:[]
      }
    },
    mounted(){
      this.drawLine();
      getPUser().then(res=>{
        this.list=res.data.data;
        console.log(res)
      })
    },
    methods: {
      drawLine(){
          // 基于准备好的dom，初始化echarts实例
          console.log(this.$echarts)
          let myChart = this.$echarts.init(document.getElementById('mychart'))
          // 绘制图表
          myChart.setOption({
              title: { text: '上周看病数量' },
              tooltip: {},
              xAxis: {
                  data: ["周一","周二","周三","周四","周五","周六","周日"]
              },
              yAxis: {},
              series: [{
                  type: 'line',
                  color:'blue',
                  smooth:true,
                  data: [12, 5, 28,18,9,14,10]
              }]
          });
      }
    }
}
</script>

<style scoped>
  .homes{
    width: 98%;
    height: 100%;
    line-height: 300px;
  }
  .shou1{
    margin-top: 20px;
    width: 67.7%;
    height: 45%;
    background: #fff;
    float: left;
    margin-left: 20px;
  }
 .shou1 #mychart{
    width: 100%;
    height: 100%;
  }
  .homes .shou4{
    width: 33.3%;
    height: 45%;
    background: #fff;
    float: left;
    margin-top: 20px;
    margin-left: 17px;
  }
  .homes .shou4 .zuoshang{
    float: left;
    margin-top: -60px;
    margin-left: 10px;
  }
  .homes .shou4 .tupian1{
    margin-top: 100px;
    margin-left: -40px;
  }


  .homes .shou5{
    width: 30%;
    height: 45%;
    background: #fff;
    float: right;
    margin-top: 20px;
  }
  .homes .shou5 .xioahe2 h2{
    float: left;
    margin-top: -60px;
    margin-left: 10px;
  }
  .shou5 .listsss dl dt b{
    width: 40px;
    height: 40px;
    margin-right: 10px;
  }
  .shou5 .listsss dl dt span{
    margin-left: 30px;
  }
  .shou5 .listsss dl dd span{
    margin-right: 75px;
  }
  .shou5 .listsss dl dt{
    float: left;
    margin-top: -50px;
    margin-left: 10px;
  }
  .shou5 .listsss{
    width: 100%;
    height: 30px;
    margin-top: -15px;
    float: left;
  }
  .shou5 .listsss dl{
    margin-top: -70px;
  }
  .shou5 .listsss dl dd{
    margin-right: 10px;
    float: right;
    margin-top: -50px;
  }
  .shou5 .listsss dl dd b{
    color: rgb(53, 119, 243);
  }

  .homes .shou3{
    width: 33.3%;
    height: 45%;
    background: #fff;
    float: left;
    margin-top: 20px;
    margin-left: 20px;
  }
  .homes .shou3 .xioahe1 h2{
    float: left;
    margin-top: -60px;
    margin-left: 10px;
  }
  .shou3 .listss dl dt b{
    width: 40px;
    height: 40px;
    margin-right: 10px;
  }
  .shou3 .listss dl dt span{
    margin-left: 30px;
  }
  .shou3 .listss dl dd span{
    margin-right: 75px;
  }
  .shou3 .listss dl dt{
    float: left;
    margin-top: -50px;
  }
  .shou3 .listss{
    width: 100%;
    height: 30px;
    margin-top: -15px;
    float: left;
    margin-left: 20px;
  }
  .shou3 .listss dl{
    margin-top: -70px;
  }
  .shou3 .listss dl dd{
    margin-right: 10px;
    float: right;
    margin-top: -50px;
  }
  .shou3 .listss dl dd b{
    color: rgb(53, 119, 243);
  }


  .homes .shou2{
    width: 30%;
    height: 45%;
    background: #fff;
    float: right;
    margin-top: 20px;
  }
  .homes .shou2 .xioahe h2{
    float: left;
    margin-top: -60px;
    margin-left: 10px;
  }
  .shou2 .lists dl dt img{
    width: 30px;
    height: 30px;
    margin-right: 10px;
  }
  .shou2 .lists dl dd span{
    margin-right: 75px;
  }
  .shou2 .lists dl dt{
    float: left;
    margin-top: -50px;
  }
  .shou2 .lists{
    width: 100%;
    height: 30px;
    margin-top: 15px;
    float: left;
    margin-left: 20px;
  }
  .shou2 .lists dl{
    margin-top: -70px;
  }
  .shou2 .lists dl dd{
    margin-right: 50px;
    float: right;
    margin-top: -50px;
  }

</style>